<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="220px" style="position: relative;">
				<el-affix :offset="5">
					<img src="@/assets/images/logo.png" alt="logo" width="200px" height="90x"
						style="margin-bottom: 10px;" />
					<el-menu default-active="4" active-text-color="#242424">
						<el-menu-item index="1">
							<svg-icon icon-class="home"></svg-icon>
							<span>首页</span>
						</el-menu-item>
						<el-menu-item index="2">
							<svg-icon icon-class="gc"></svg-icon>
							<span>广场案例</span>
						</el-menu-item>
						<el-menu-item index="3">
							<svg-icon icon-class="jc"></svg-icon>
							<span>选材中心</span>
						</el-menu-item>
						<el-menu-item index="4">
							<svg-icon icon-class="jj"></svg-icon>
							<span>家居产品</span>
						</el-menu-item>
						<el-sub-menu index="5">
							<template #title>
								<svg-icon icon-class="bz"></svg-icon>
								<span>岩板砖</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1">
									<svg-icon icon-class="dz"></svg-icon>
									<span>定制</span>
								</el-menu-item>
							</el-menu-item-group>
						</el-sub-menu>
					</el-menu>
				</el-affix>
				<div class="user_box">
					<el-dropdown placement="top-start">
						<el-button class="userbtn"> <el-icon><Avatar /></el-icon><span>个人中心</span></el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item><svg-icon icon-class="sc"></svg-icon> 我的收藏</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="xh"></svg-icon> 我的喜欢</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="xc"></svg-icon> 我的选材</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="sj"></svg-icon> 我的设计</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="gwc"></svg-icon> 购物车</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="dd"></svg-icon> 我的订单</el-dropdown-item>
								<el-dropdown-item><svg-icon icon-class="set"></svg-icon> 账号设置</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-aside>
			<el-container>
				<el-header>
					<el-row style="width: 100%;">
						<el-col :span="12" :offset="4">
							<el-input class="search" v-model="search" style="width:100%; margin-top: 28px;" placeholder="搜索">
								<template #prefix>
									<el-icon>
										<Search />
									</el-icon>
								</template>
							</el-input>
						</el-col>
						<el-col :span="6" :offset="2">
							<div class="top_rlink">
								<el-link>帮助中心</el-link>
								<el-link>关于我们</el-link>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<el-main>
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<el-tab-pane label="所有产品" name="first">
							<div class="select_jj">
								<el-radio-group v-model="radio1" size="large">
									<el-radio-button label="1">
										<svg-icon icon-class="jiaju01"></svg-icon>
										<div>餐桌</div>
									</el-radio-button>
									<el-radio-button label="2">
										<svg-icon icon-class="jiaju02"></svg-icon>
										<div>茶几</div>
									</el-radio-button>
									<el-radio-button label="3">
										<svg-icon icon-class="jiaju03"></svg-icon>
										<div>茶台</div>
									</el-radio-button>
									<el-radio-button label="4">
										<svg-icon icon-class="jiaju04"></svg-icon>
										<div>浴室柜</div>
									</el-radio-button>
									<el-radio-button label="5">
										<svg-icon icon-class="jiaju05"></svg-icon>
										<div>边几</div>
									</el-radio-button>
									<el-radio-button label="6">
										<svg-icon icon-class="jiaju06"></svg-icon>
										<div>玄关桌</div>
									</el-radio-button>
								</el-radio-group>
							</div>
							<div class="select_jj clearfix">
								<div class="lable_sel">款式</div> <el-segmented v-model="value" :options="options" />
							</div>
							<div class="select_jj clearfix">
								<div class="lable_sel">选项</div>
								<div class="sel_right">
									<el-row>
										<el-col :span="16">
											<el-select v-model="value01" placeholder="筛选"
												style="width:100px; margin-right: 10px;" clearable>
												<el-option v-for="item in options01" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
											<el-select v-model="value02" placeholder="销量"
												style="width:100px; margin-right: 10px;" clearable>
												<el-option v-for="item in options01" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
											<el-select v-model="value03" placeholder="价格"
												style="width:100px; margin-right: 10px;" clearable>
												<el-option v-for="item in options01" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
											<el-select v-model="value04" placeholder="区间"
												style="width:100px; margin-right: 10px;" clearable>
												<el-option v-for="item in options01" :key="item.value"
													:label="item.label" :value="item.value" />
											</el-select>
										</el-col>
										<el-col :span="8">
											<el-radio-group v-model="radio2" style="float: right;margin-right: 10px;">
												<el-radio-button label="1">
													<span>按产品款式排列</span>
													<svg-icon icon-class="icon01"></svg-icon>
												</el-radio-button>
												<el-radio-button label="2">
													<span>按大版款式排列</span>
													<svg-icon icon-class="icon02"></svg-icon>
												</el-radio-button>
											</el-radio-group>
										</el-col>
									</el-row>
								</div>
							</div>
							<div class="select_jj">
								<el-row :gutter="30">
									<el-col :span="6" v-for="(item, index) in cpList" :key="index">
										<div class="cp_list">
											<router-link to="">
												<div class="cp_listimg">
													<el-checkbox-button class="collect" :v-model="item.checked"
														@click.native.stop="() => { }"><el-icon>
															<Star />
														</el-icon><el-icon>
															<StarFilled />
														</el-icon><span>收藏</span></el-checkbox-button>
													<el-image style="width: 100%; height:auto" :src="item.img"
														fit="fill" />
												</div>
											</router-link>
											<div class="cp_mid clearfix">
												<h3>￥{{item.number}}</h3>
												<el-link class="carbtn" :underline="false"><svg-icon
														icon-class="car"></svg-icon></el-link>
											</div>
											<el-link class="cpname" :underline="false">{{item.name}}</el-link>
											<div class="cpname_small">{{item.txt}}</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</el-tab-pane>
						<el-tab-pane label="现货推荐" name="second">现货推荐</el-tab-pane>
					</el-tabs>
				</el-main>
			</el-container>
		</el-container>	
	</div>
	<el-footer class="pagefooter">Footer</el-footer>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted, onUnmounted, reactive } from 'vue'
	import { useRouter } from 'vue-router'
	import type { ImageProps, TabsPaneContext, ElCheckbox } from 'element-plus'
	const checked2 = ref(false)
	const search = ref('')
	const activeName = ref('first')
	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}
	const radio1 = ref('1')
	const radio2 = ref('1')
	const value = ref('全部')
	const options = ['全部', '芬迪白(纯白)', '玉龙雪山', '宝格丽黑', '亚马逊绿', '白云海']
	const value01 = ref()
	const value02 = ref()
	const value03 = ref()
	const value04 = ref()
	const options01 = [
		{
			value: 'A',
			label: 'A',
		},
		{
			value: 'B',
			label: 'B',
		}
	]
	const cpList = [
		{
			img: './src/assets/images/cp01.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp02.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp01.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp02.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp01.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp02.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp01.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}, {
			img: './src/assets/images/cp02.jpg',
			checked: false,
			number: '6888',
			name: '蓝水晶方形轻奢大理石餐桌蓝水晶方形轻奢大理石餐桌',
			txt: '大理石/蓝水晶/餐桌/圆形带转盘'
		}
	]
</script>

<style lang="scss"></style>